<script>
import { fetchList } from '@/api/resume'

export default {
  data() {
    return {
      searchContent: '',
      page: 1,
      pageSize: 20,
      pageTotal: 0,
      resumeList: []
    }
  },
  methods: {
    getData() {
      fetchList(this.page, this.pageSize, this.searchContent)
        .then(res => {
          console.log(res)
          const msg = res.message
          msg.list.forEach(el => {
            try {
              el.award = JSON.parse(el.award)
            } catch (e) {
              el.award = ''
            }
            // el.tip = el.tips.includes(',') ? el.tips.split(',') : el.tips.split('，')
          })
          this.resumeList = msg.list
          this.pageTotal = msg.total
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
    },
    reset() {
      this.searchContent = ''
      this.page = 1
      this.pageSize = 20
      this.pageTotal = 0
      this.getData()
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<template>
  <div>
    <div class="d-flex ai-center jc-end">
      <el-input
        v-model="searchContent"
        placeholder="请输入简历名称"
        prefix-icon="el-icon-search"
        style="max-width: 220px;margin-right: 10px;"
      />
      <el-button type="primary" @click="getData">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary">新增</el-button>
    </div>

    <el-table :data="resumeList" style="width: 100%;margin-top: 20px" height="75vh">
      <el-table-column type="index" width="50" />
      <el-table-column label="简历名称" prop="name" width="180" />
      <el-table-column label="用户名字" prop="username" width="100" />
      <el-table-column label="照片" width="120">
        <template slot-scope="scope">
          <el-avatar shape="square" size="medium" :src="scope.row.userImg"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" prop="bornDate" width="180" />
      <el-table-column label="性别" prop="sex" width="80" />
      <el-table-column label="电话" prop="tel" width="180" />
      <el-table-column label="期望薪资" width="120">
        <template slot-scope="scope">
          <div>
            {{scope.row.salaryStart}}-{{scope.row.salaryEnd}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="岗位意向" prop="jobIntention" width="140" />
      <el-table-column label="学历" prop="education" width="140" />
      <el-table-column label="邮箱" prop="mail" width="180" />
<!--      <el-table-column label="微信" prop="wx" width="180" />-->
      <el-table-column label="专业" prop="major" width="80" />
      <el-table-column label="籍贯" prop="address" width="80" />
      <el-table-column label="当前身份" prop="roles" width="80" />
      <el-table-column label="求职状态" prop="findWorkStatus" width="140" />
      <el-table-column label="创建时间" prop="inputTime" width="180" />
      <el-table-column label="操作" width="300" >
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-button type="primary">详情</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="d-flex jc-end">
      <el-pagination
        :total="pageTotal"
        :current-page="page"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
